<template>
  <div class="main-page app-main">
    <panel-group @handleSetLineChartData="handleSetLineChartData"/>
    <div class="top-two-container">
      <!--      用户概况-->
      <el-row class="user-view">
        <div class="title">
          <svg-icon icon-class="table"/>
          用户概况
        </div>
        <div class="content">
          <div class="content-one" v-for="(item,index) in userView">
            <h3 class="red">{{item.number}}</h3>
            <div class="text">{{item.text}}</div>
          </div>
        </div>
      </el-row>
      <!--      待办事项-->
      <el-row class="user-view pending-matters">
        <div class="title">
          <svg-icon icon-class="table"/>
          待办事项
        </div>
        <div class="content">
          <div class="content-one" v-for="(item,index) in userView">
            <h3 class="red">{{item.number}}</h3>
            <div class="text">{{item.text}}</div>
          </div>
        </div>
      </el-row>
    </div>
    <!--    快捷入口-->
    <el-row class="top-two-container">
      <div class="fast-doors user-view">
        <div class="title">
          <svg-icon icon-class="table"/>
          快捷入口
        </div>
        <div class="content">

          <div class="content-one" v-for="(item,index) in fastDoors">
            <router-link :to="{name:item.linkTo}">
              <div>
                <svg-icon :icon-class="item.icon" class="fast-svg"/>
                <div class="text">{{item.text}}</div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </el-row>
    <!--    课程收入趋势-->
    <el-row class="top-two-container">
      <div class="fast-doors user-view">
        <div class="title">
          <svg-icon icon-class="table"/>
          课程收入趋势
        </div>
        <div class="content">
          <line-chart :chart-data="lineChartData"/>
        </div>
      </div>
    </el-row>
    <!--    商品收入趋势-->
    <el-row class="top-two-container">
      <div class="fast-doors user-view">
        <div class="title">
          <svg-icon icon-class="table"/>
          商品收入趋势
        </div>
        <div class="content">
          <line-chart :chart-data="lineChartData"/>
        </div>
      </div>
    </el-row>

  </div>
</template>

<script>
  import panelGroup from './components/panelGroup'
  import lineChart from './components/lineChart'

  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    }
  }
  export default {
    name: 'index',
    data() {
      return {
        lineChartData: lineChartData.newVisitis,
        userView: [{
          text: '今日注册用户',
          number: 999
        }, {
          text: '今日注册用户',
          number: 324
        }, {
          text: '今日注册用户',
          number: 999
        }, {
          text: '今日注册用户',
          number: 324
        }, {
          text: '今日注册用户',
          number: 999
        }, {
          text: '今日注册用户',
          number: 324
        }, {
          text: '今日注册用户',
          number: 999
        }, {
          text: '今日注册用户',
          number: 324
        }],
        //快速入口
        fastDoors: [{
          linkTo: 'courseListAdd',
          icon: 'addone',
          text: '添加课程'
        }, {
          linkTo: 'courseOrder',
          icon: 'orderlist',
          text: '课程订单'
        }, {
          linkTo: '',
          icon: 'add',
          text: '添加商品'
        }, {
          linkTo: '',
          icon: 'goodsorder',
          text: '商品订单'
        }, {
          icon: 'message',
          text: '推送管理'
        }, {
          linkTo: 'bannerManage',
          icon: 'advertisement',
          text: '广告位管理'
        }, {
          icon: 'users',
          text: '用户管理'
        }, {
          linkTo: '',
          icon: 'tongji',
          text: '统计数据'
        }]
      }
    },
    components: {
      panelGroup, lineChart
    },
    methods: {
      handleSetLineChartData(type) {
        //this.lineChartData = lineChartData[type]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main-page {
    padding: 32px;
    background-color: #f0f2f5;
    position: relative;

    .red {
      color: rgb(229, 28, 35);
    }

    .top-two-container {
      display: flex;
    }

    .user-view {
      padding: 10px;
      background: #fff;
      width: 60%;

      .title {
        padding-top: 8px;
        padding-bottom: 18px;
        border-bottom: 1px solid #ddd;
      }

      .content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .content-one {
          width: 25%;
          text-align: center;
          padding-bottom: 10px;
        }
      }
    }

    .pending-matters {
      width: 38%;
      margin-left: 2%;
    }

    .fast-doors {
      width: 100%;
      margin-top: 18px;

      .content {
        .content-one {
          width: 12.5%;

          .fast-svg {
            font-pageSize: 40px;
            margin-top: 15px;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
</style>
